<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('风控规则') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('规则类型')" prop="ruleType">
        <el-select v-model="queryParams.ruleType" :placeholder="$t('规则类型')" clearable @keyup.enter.native="queryHandle">
          <el-option
            v-for="item in ruleTypeOption"
            :key="item.dictValue"
            :value="item.dictValue"
            :label="item.dictLabel"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('产品名称')" prop="productName">
        <el-input
          v-model="queryParams.productName"
          :placeholder="$t('产品名称')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item :label="$t('规则状态')" prop="ruleStatus">
        <el-select v-model="queryParams.ruleStatus" :placeholder="$t('规则类型')" clearable @keyup.enter.native="queryHandle">
          <el-option :value="'KQ'" :label="$t('开启')" />
          <el-option :value="'TY'" :label="$t('停用')" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t('搜索') }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('重置') }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          size="mini"
          @click="addHandle"
        >{{ $t('新增') }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
        >{{ $t("导出") }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          size="mini"
          @click="slHandle"
        >{{ $t('数量控制') }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          size="mini"
          @click="cbHandle"
        >{{ $t('成本控制') }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          size="mini"
          class="jqbtn"
          @click="jqHandle"
        >{{ $t('久期控制') }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          size="mini"
          @click="gglHandle"
        >{{ $t('杠杆率控制') }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          size="mini"
          @click="hmdHandle"
        >{{ $t('投资标的黑名单控制 ') }}</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="dataList" border tooltip-effect="darkTable">
      <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('风控编号')" align="center" prop="riskControlNumber" width="120">
        <template slot-scope="scope">
          <span class="link-type" @click="updateHandle(scope.row)">{{ scope.row.riskControlNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('规则类型')" align="center" prop="ruleType" width="120" />
      <el-table-column :label="$t('适用产品')" align="center" prop="applicableProducts" width="180" />
      <el-table-column :label="$t('风控描述')" align="center" prop="riskControlDescription" />
      <el-table-column :label="$t('最后修改时间')" align="center" prop="lastModified" width="130" />
      <el-table-column :label="$t('规则状态')" align="center" prop="ruleStatus" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.ruleStatus === 'KQ'" class="status-text"><el-tag type="success">{{ $t('开启') }}</el-tag></span>
          <span v-else class="status-text"><el-tag type="danger">{{ $t('停用') }}</el-tag></span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width" width="200">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="text"
            icon="el-icon-setting"
            @click="disableHandle(scope.row, scope.$index)"
          >
            <span v-if="scope.row.ruleStatus === 'KQ'">{{ $t('停用') }}</span>
            <span v-else>{{ $t('启用') }}</span>
          </el-button>
          <el-button
            size="small"
            type="text"
            icon="el-icon-eidt"
            @click="updateHandle(scope.row)"
          >{{ $t('修改') }}</el-button>
          <el-button
            size="small"
            type="text"
            icon="el-icon-delete"
            @click="deleteHandle(scope.$index)"
          >{{ $t('删除') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改授信信息对话框 -->
    <el-dialog :title="$t(title)" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <bondRiskControlRulesForm ref="bondRiskControlRulesForm" />
    </el-dialog>

    <!-- 数量控制 -->
    <el-dialog :title="$t(title)" :visible.sync="slOpen" style="height: 600px; width: 1000px; margin: auto !important;" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <template>
        <div>
          <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
            <el-row>
              <el-col :span="12">
                <el-form-item :label="$t('产品编号')" prop="text1" :rules="{ required: true, message: this.$t('必填信息'), trigger: 'blur' }">
                  <el-input v-model="form.text1" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('启用风控')" prop="text2">
                  <el-switch v-model="form.text2" active-color="#13ce66" inactive-color="#ff4949" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('比较方向')" prop="text3">
                  <el-select v-model="form.text3" placeholder="请选择">
                    <el-option label="大于" value="DY" />
                    <el-option label="小于" value="XY" />
                    <el-option label="等于" value="DE" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('比例')" prop="text4">
                  <el-input v-model="form.text4" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('分子类型')" prop="text5">
                  <el-input v-model="form.text5" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('分母类型')" prop="text6">
                  <el-input v-model="form.text6" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('控制方式')" prop="text7">
                  <el-input v-model="form.text7" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label="$t('风控描述')" prop="text8">
                  <el-input v-model="form.text8" type="textarea" :placeholder="$t('备注')" show-word-limit :maxlength="2000" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer" style="text-align: right;">
            <el-button @click="cancel()">{{ $t("取消") }}</el-button>
            <el-button type="primary" @click="submitForm()">{{ $t("保存") }}</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
    <!-- 成本控制 -->
    <el-dialog :title="$t(title)" :visible.sync="cbOpen" style="height: 500px; width: 1000px; margin: auto !important;" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <template>
        <div>
          <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
            <el-row>
              <el-col :span="12">
                <el-form-item :label="$t('产品编号')" prop="text1" :rules="{ required: true, message: this.$t('必填信息'), trigger: 'blur' }">
                  <el-input v-model="form.text1" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('启用风控')" prop="text2">
                  <el-switch v-model="form.text2" active-color="#13ce66" inactive-color="#ff4949" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('比较方向')" prop="text3">
                  <el-select v-model="form.text3" placeholder="请选择">
                    <el-option label="大于" value="DY" />
                    <el-option label="小于" value="XY" />
                    <el-option label="等于" value="DE" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('比例')" prop="text4">
                  <el-input v-model="form.text4" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('金额')" prop="text5">
                  <el-input v-model="form.text5" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('控制方式')" prop="text6">
                  <el-input v-model="form.text6" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('投资标的')" prop="text8">
                  <el-input v-model="form.text8" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('分子类型')" prop="text7">
                  <el-input v-model="form.text7" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('分母类型')" prop="text9">
                  <el-input v-model="form.text9" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('投资标的评级')" prop="text10">
                  <dictSelect
                    v-model="form.pj"
                    :clearable="true"
                    dictionary="letter_rating"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label="$t('风控描述')" prop="text11">
                  <el-input v-model="form.text11" type="textarea" :placeholder="$t('备注')" show-word-limit :maxlength="2000" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer" style="text-align: right;">
            <el-button @click="cancel()">{{ $t("取消") }}</el-button>
            <el-button type="primary" @click="submitForm()">{{ $t("保存") }}</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
    <!-- 久期控制 -->
    <el-dialog :title="$t(title)" :visible.sync="jqOpen" style="height: 500px; width: 1000px; margin: auto !important;" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <template>
        <div>
          <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
            <el-row>
              <el-col :span="12">
                <el-form-item :label="$t('产品编号')" prop="text1" :rules="{ required: true, message: this.$t('必填信息'), trigger: 'blur' }">
                  <el-input v-model="form.text1" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('启用风控')" prop="text2">
                  <el-switch v-model="form.text2" active-color="#13ce66" inactive-color="#ff4949" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('比较方向')" prop="text3">
                  <el-select v-model="form.text3" placeholder="请选择">
                    <el-option label="大于" value="DY" />
                    <el-option label="小于" value="XY" />
                    <el-option label="等于" value="DE" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('产品久期(年)')" prop="text4">
                  <el-input v-model="form.text4" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label="$t('风控描述')" prop="text8">
                  <el-input v-model="form.text8" type="textarea" :placeholder="$t('备注')" show-word-limit :maxlength="2000" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer" style="text-align: right;">
            <el-button @click="cancel()">{{ $t("取消") }}</el-button>
            <el-button type="primary" @click="submitForm()">{{ $t("保存") }}</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
    <!-- 杠杆率控制 -->
    <el-dialog :title="$t(title)" :visible.sync="gglOpen" style="height: 500px; width: 1000px; margin: auto !important;" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <template>
        <div>
          <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
            <el-row>
              <el-col :span="12">
                <el-form-item :label="$t('产品名称')" prop="text1" :rules="{ required: true, message: this.$t('必填信息'), trigger: 'blur' }">
                  <el-input v-model="form.text1" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('启用风控')" prop="text2">
                  <el-switch v-model="form.text2" active-color="#13ce66" inactive-color="#ff4949" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('比较方向')" prop="text3">
                  <el-select v-model="form.text3" placeholder="请选择">
                    <el-option label="大于" value="DY" />
                    <el-option label="小于" value="XY" />
                    <el-option label="等于" value="DE" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('杠杆控制')" prop="text4">
                  <el-input v-model="form.text4" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label="$t('风控描述')" prop="text8">
                  <el-input v-model="form.text8" type="textarea" :placeholder="$t('备注')" show-word-limit :maxlength="2000" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer" style="text-align: right;">
            <el-button @click="cancel()">{{ $t("取消") }}</el-button>
            <el-button type="primary" @click="submitForm()">{{ $t("保存") }}</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
    <!-- 投资标的黑名单控制 -->
    <el-dialog :title="$t(title)" :visible.sync="hmdOpen" style="height: 500px; width: 1000px; margin: auto !important;" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <template>
        <div>
          <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
            <el-row>
              <el-col :span="12">
                <el-form-item :label="$t('产品名称')" prop="cpmc" :rules="{ required: true, message: this.$t('必填信息'), trigger: 'blur' }">
                  <el-input v-model="form.cpmc" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('交易市场')" prop="jysc">
                  <el-input v-model="form.jysc" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('产品')" prop="cp">
                  <el-input v-model="form.cp" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('评级')" prop="pj">
                  <dictSelect
                    v-model="form.pj"
                    :clearable="true"
                    dictionary="letter_rating"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label="$t('风控描述')" prop="fkms">
                  <el-input v-model="form.fkms" type="textarea" :placeholder="$t('备注')" show-word-limit :maxlength="2000" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer" style="text-align: right;">
            <el-button @click="cancel()">{{ $t("取消") }}</el-button>
            <el-button type="primary" @click="submitForm()">{{ $t("保存") }}</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import bondRiskControlRulesForm from '@/views/bond/bondRiskControlRules/bondRiskControlRulesForm.vue'
export default {
  components: {
    bondRiskControlRulesForm
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 授信信息表格数据
      dataList: [],
      // 弹出层标题
      title: this.$t('风控规则'),
      // 是否显示弹出层
      formOpen: false,
      slOpen: false,
      cbOpen: false,
      gglOpen: false,
      jqOpen: false,
      hmdOpen: false,
      // 债券一级类别字典
      ruleTypeOption: [
        { dictValue: '', dictLabel: '久期控制' },
        { dictValue: '1', dictLabel: '投资标的控制' },
        { dictValue: '2', dictLabel: '杠杆率控制' },
        { dictValue: '3', dictLabel: '成本控制' }
      ],
      // 查询参数
      queryParams: {
        ruleType: undefined,
        productName: undefined,
        ruleStatus: undefined,
        pageNum: 1,
        pageSize: 10
      },
      form: {
        cpmc: undefined,
        jysc: undefined,
        cp: undefined,
        pj: undefined,
        fkms: undefined,
        text1: undefined,
        text2: undefined,
        text3: undefined,
        text4: undefined,
        text5: undefined,
        text6: undefined,
        text7: undefined,
        text8: undefined,
        text9: undefined,
        text10: undefined,
        text11: undefined
      }
    }
  },
  created() {
    this.dataList = [
      { riskControlNumber: 'RK-001', ruleType: '久期控制', riskControlDescription: '', applicableProducts: '自研产品', lastModified: '2021-12-21', ruleStatus: 'KQ' },
      { riskControlNumber: 'RK-002', ruleType: '投资标的控制', riskControlDescription: '', applicableProducts: '自研产品', lastModified: '2022-01-13', ruleStatus: 'KQ' },
      { riskControlNumber: 'RK-003', ruleType: '杠杆率控制', riskControlDescription: '杠杆率控制', applicableProducts: '自研产品', lastModified: '2022-01-31', ruleStatus: 'KQ' },
      { riskControlNumber: 'RK-004', ruleType: '成本控制', riskControlDescription: '成本控制', applicableProducts: '自研产品', lastModified: '2022-02-20', ruleStatus: 'KQ' },
      { riskControlNumber: 'RK-005', ruleType: '久期控制', riskControlDescription: '', applicableProducts: '自研产品', lastModified: '2022-03-21', ruleStatus: 'KQ' },
      { riskControlNumber: 'RK-006', ruleType: '投资标的控制', riskControlDescription: '投资标的控制', applicableProducts: '自研产品', lastModified: '2022-03-22', ruleStatus: 'KQ' },
      { riskControlNumber: 'RK-007', ruleType: '杠杆率控制', riskControlDescription: '杠杆率控制', applicableProducts: '自研产品', lastModified: '2022-03-23', ruleStatus: 'KQ' }
    ]
    this.getList()
  },
  methods: {
    /** 查询授信信息列表 */
    getList() {
      this.loading = true
      setTimeout(() => {
        this.total = this.dataList.length
        this.loading = false
      }, 200)
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryHandle()
    },
    /** 新增按钮操作 */
    addHandle() {
      this.title = this.$t('风控规则')
      this.formOpen = true
      this.$nextTick(() => {
        this.$refs.bondRiskControlRulesForm.init(null)
      })
    },
    /** 修改按钮操作 */
    updateHandle(row) {
      this.title = this.$t('风控规则')
      this.formOpen = true
      this.$nextTick(() => {
        // 调用form页面的 init 方法初始化数据
        this.$refs.bondRiskControlRulesForm.init(row)
      })
    },
    /** 停用按钮操作 */
    disableHandle(row) {
      this.loading = true
      setTimeout(() => {
        row.ruleStatus === 'KQ' ? row.ruleStatus = 'TY' : row.ruleStatus = 'KQ'
        this.loading = false
      }, 200)
    },
    /** 删除按钮操作 */
    deleteHandle(index) {
      var _this = this
      this.$confirm(this.$t('确定要删除该条记录吗?'), this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(() => {
        _this.loading = true
        setTimeout(() => {
          _this.dataList.splice(index, 1)
          _this.loading = false
        }, 200)
      })
    },
    slHandle() {
      this.title = this.$t('数量控制')
      this.slOpen = true
    },
    cbHandle() {
      this.title = this.$t('成本控制')
      this.cbOpen = true
    },
    jqHandle() {
      this.title = this.$t('久期控制')
      this.jqOpen = true
    },
    gglHandle() {
      this.title = this.$t('杠杆率控制')
      this.gglOpen = true
    },
    hmdHandle() {
      this.title = this.$t('投资标的控制')
      this.hmdOpen = true
    },
    cancel() {
      this.formOpen = false
      this.slOpen = false
      this.cbOpen = false
      this.jqOpen = false
      this.gglOpen = false
      this.hmdOpen = false
    },
    submitForm() {
      return new Promise((resolve, reject) => {
        this.$refs['form'].validate(valid => {
          // 验证数据
          if (valid) {
            this.cancel()
          } else {
            reject()
            this.locationError(document)
          }
        })
      })
    }

  }
}
</script>
<style scoped>
.jqbtn {
  color: rgb(255, 255, 255);
  background-color: #9940BB;
  border-color: #9940BB;
}
</style>
